<template>
	<view style="overflow: hidden;">
		<view>
			<view class="size-28 bold mt-30 ml-30">
				选择题
			</view>
			<view class="box">
				<view class="item" v-for="(item,index) in list">
					<view class="size-28">{{item.exam_title}}</view>
					<view class="flex_l flex-wrap">
						<view class="li flex_l  mt-30" v-for="(i,index) in item.exam_answer">
							<view class="img" v-if="item.is_correct == index"> <image style="width: 100%;height: 100%;" src="../../../static/s_ed.png" mode=""></image> </view>
							<view class="img" v-else></view>
							<view class="size-28">{{i.user_answer_content}}</view>
						</view>
					</view>
				</view>
				<view class="item" v-for="(item,index) in list1">
					<view class="size-28">{{item.exam_title}}</view>
					<view class="flex_l flex-wrap">
						<view class="li flex_l  mt-30" v-for="(i,index) in item.exam_answer">
							<!-- <view class="img" :style="{background:item.is_correct == index ? '#333' : ''}"></view> -->
							<view class="img" v-if="item.is_correct == index"> <image style="width: 100%;height: 100%;" src="../../../static/s_ed.png" mode=""></image> </view>
							<view class="img" v-else></view>
							<view class="size-28">{{i.user_answer_content}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="size-28 bold mt-30 ml-30">
				主观题
			</view>
			<view class="box">
				<view class="item" v-for="(item,index) in list2">
					<view class="size-28">{{item.exam_title}}</view>
					<textarea name="" id="" cols="30" rows="10"></textarea>
				</view>
			</view>
			<!-- <view class="btns center">
				<view>暂存</view>
				<view class="a">提交</view>
			</view> -->
		</view>
		<view class="box">
			<view class="flex row">
				<view>姓名</view>
				<view>{{data.patient.realname}}</view>
			</view>
			<view class="flex row">
				<view>性别</view>
				<view>{{data.patient.gender==1 ? '男' : '女'}}</view>
			</view>
			<view class="flex row">
				<view>年龄</view>
				<view>{{data.patient.age}}</view>
			</view>
			<!-- <view class="flex row">
				<view>出生日期</view>
				<view>2020-02-20</view>
			</view> -->
			<view class="flex row">
				<view>主题观得分</view>
				<view style="color: #FF5F32;">{{data.patient.subjectivity_score}}</view>
			</view>
			<view class="flex row">
				<view>综合得分</view>
				<view style="color: #FF5F32;">{{data.patient.score}}</view>
			</view>
		</view>
		<view class="btn" @click="navto">
			打分
		</view>
		<view style="height: 60rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{},
				list:[],
				list1:[],
				list2:[],
				id:''
			}
		},
		onLoad(op) {
			this.id = op.id
			this.detail()
		},
		methods: {
			detail(){
				console.log(111111111111)
				this.$api.examDetail({
					user_exam_id:this.id
				}).then(res=>{
					this.data = res.data
					this.list = this.data.examList.filter(value => value.exam_type == 0)
					this.list1 = this.data.examList.filter(value => value.exam_type == 1)
					this.list2 = this.data.examList.filter(value => value.exam_type == 2)
				})
			},
			navto(){
				uni.navigateTo({
					url:'../dafen/dafen?id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0rpx 30rpx 0 30rpx;
		margin: 30rpx auto 0;
		overflow: hidden;
	}
	.row{
		padding: 40rpx 0;
		border-bottom: 2rpx solid #f8f8f8;
		font-size: 28rpx;
	}
	.row:last-child{
		border: none;
	}
	.btn{
		margin: 160rpx auto 0;
	}
	.li {
		width: 50%;

		.img {
			width: 40rpx;
			height: 40rpx;
			background: #F1F1F1;
			margin-right: 20rpx;
			border-radius: 50%;
		}

	}

	.item {
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #F1F1F1;
		margin-top: 30rpx;
		textarea{
			width: 100%;
			height: 154rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			margin-top: 30rpx;
		}
	}
	.item:last-child{
		border: none;
	}
	.btns{
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		view{
			width: 300rpx;
			height: 80rpx;
			border: 2rpx solid #882027;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			text-align: center;
			line-height: 80rpx;
			color: #882027;
			font-size: 28rpx;
		}
		.a{
			background-color: #882027;
			color: #fff;
			margin-left: 30rpx;
		}
	}
	.status{
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		margin-top: 144rpx;
		image{
			width: 240rpx;
			height: 240rpx;
			margin-bottom: 58rpx;
		}
	}
</style>